<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="4">
        <el-button icon="el-icon-location" type="primary" @click="mapDialogVisible = true" >拾取坐标</el-button>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="mapDialogVisible" title="地图坐标拾取" width="60%">
      <el-card :body-style="mapCardStyle">
        <el-amap v-if="lng1!=0" :events="events" :center="center" :plugin="plugin" :map-style="mapStyle" vid="amapDemo">
          <el-amap-marker :position="position" :icon="icon" vid="component-marker" />
        </el-amap>
        <el-amap v-else :events="events" :plugin="plugin" :map-style="mapStyle" vid="amapDemo">
          <el-amap-marker :position="position" :icon="icon" vid="component-marker" />
        </el-amap>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="mapDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="mapDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'AmapPosition',
  props: {
    id: {
      type: Number,
      default: 0
    },
    lng: {
      type: String,
      default: '0'
    },
    lat: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      mapDialogVisible: false,
      mapCardStyle: {
        padding: '0px',
        height: '500px'
      },
      lng1: this.lng,
      lat1: this.lat,
      mapStyle: 'amap://styles/3137307ac2a31075381f1b0fcf587fcc',
      icon: 'location.png',
      plugin: ['ToolBar'],
      events: {
        click: e => {
          this.lng1 = e.lnglat.lng
          this.lat1 = e.lnglat.lat
        }
      }
    }
  },
  computed: {
    position() {
      return [this.lng1, this.lat1]
    },
    center() {
      return this.position
    }
  },
  watch: {
    lng1: function() {
      this.change()
    },
    lat1: function() {
      this.change()
    }
  },
  methods: {
    change() {
      this.$emit('change', this.lng1, this.lat1)
    }
  }
}
</script>
<style>
  .amap-icon img{
    width:25px;
    height:25px;
  }
</style>
